<template>
  <el-card class="box-card" style="margin-bottom: 10px;">
    <div v-if="isVisible" style="text-align: right;">
      <slot name="common" />
      <slot name="btns" />
      <el-button v-show="showFurtherBtn && isVisible" style="margin-left: 10px" class="filter-item" size="medium" type="primary" icon="el-icon-arrow-down" @click="isVisible=!isVisible">高级搜索</el-button>
    </div>
    <el-collapse-transition>
      <div v-if="!isVisible">
        <slot name="body" />
        <div style="text-align: center">
          <slot name="btns" />
          <el-button v-show="showFurtherBtn && !isVisible" style="margin-left: 10px" size="medium" class="filter-item" type="primary" icon="el-icon-arrow-up" @click="isVisible=!isVisible">收起高级搜索</el-button>
        </div>
      </div>
    </el-collapse-transition>
  </el-card>
</template>
<script>
export default {
  name: 'SearchForm',
  props:
    {
      showFurtherBtn: {
        type: Boolean,
        default: true
      }
    },
  data() {
    return {
      isVisible: true
    }
  }
}
</script>
